<script setup lang="ts">
import Drawer from "../uni/uni-drawer/uni-drawer.vue"
import { useBasicInfoStore, useConfigStore } from "@/store"


const props = defineProps({
  eid: {
    type: [Number, String],
    default: 0
  },
  maxNum: {
    type: [Number],
    default: 4
  }
})

const emits = defineEmits(["confirm"])
const configStore = useConfigStore()

const showRight = ref(false)
const showRightRef = ref()

// const selectProp = (item, selected) => {
//   if (selected) {
//     selectedProps.value.push(item)
//   } else {
//     const index = selectedProps.value.findIndex(x => x.id == item.id)
//     selectedProps.value.splice(index, 1)
//   }
//   // if(selectedProps.value.length == 4) {
//   //   this.showProps = false;
//   // }
// }
// 打开窗口
const showDrawer = () => {
  showRight.value = true
  showRightRef.value.open()
}
// 关闭窗口
const closeDrawer = () => {
  showRightRef.value.close()
}

const confirm = () => {
  emits("confirm")
  closeDrawer()
}
const basicStore = useBasicInfoStore()

const reset = () => {
  if ((basicStore.equipment_list.filter((a) => a.id == props.eid)?.[0]?.part ?? "") == "武器") {
    configStore.merge[props.eid.toString()] = [-1, -1, -1];
  }
  if ((basicStore.equipment_list.filter((a) => a.id == props.eid)?.[0]?.alternative ?? []).length > 0) {
    configStore.customize[props.eid.toString()] = [0, 0, 0, 0]
  }
  // this.$refs["eq-random-props"].reset()
}

onNavigationBarButtonTap(() => {
  if (showRight.value) {
    showRightRef.value.showRight.close()
  } else { showRightRef.value.open() }
})

onBackPress(() => {
  if (showRight.value) {
    showRightRef.value.close()
    return true
  }
})

defineExpose({
  showDrawer
})


watch(() => props.eid, () => {
  if ((basicStore.equipment_list.filter((a) => a.id == props.eid)?.[0]?.part ?? "") == "武器" && (configStore.merge[props.eid.toString()] ?? []).length < 3) {
    configStore.merge[props.eid.toString()] = [-1, -1, -1];
  }
})
</script>

<template>
  <Drawer ref="showRightRef" class="showRight" mode="right" :mask-click="false">
    <view class="scroll-view">
      <scroll-view class="scroll-view-box" :scroll-y="true">
        <view class="view-inner">
          <EqRandomProps :eid="eid" can-select />
        </view>
      </scroll-view>
      <view class="buttons">
        <button class="mini-btn" type="default" size="mini" @tap="reset()">
          重置
        </button>
        <button
          class="mini-btn"
          type="primary"
          size="mini"
          @tap="confirm()"
        >
          确定
        </button>
      </view>
    </view>
  </Drawer>
</template>

<style scoped lang="scss">
.showRight {
  .scroll-view {
    background-color: #111;
    //border-left: 1px solid #FFF;
    box-shadow: -3px 0 5px #222;
    /* #ifndef APP-NVUE */
    width: 100%;
    height: 100%;
    /* #endif */
    flex: 1;

    .scroll-view-box {
      flex: 1;
      position: absolute;
      top: 80rpx;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 30rpx 0 30rpx 30rpx;
      width: calc(100% - 36rpx);

      .view-inner {
        padding-right: 30rpx;
      }
    }
  }

  .buttons {
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 5px #333;
  }
}
</style>
